<template>
    <div class="">
        <el-dialog title="编辑户档" :visible.sync="dialog" width="50%" :before-close="dialogClose">
            <el-form ref="formData" :model="formData" label-width="100px">
				<el-form-item label="所属户档" prop="homeid">
				    <el-select v-model="formData.homeid" style="width: 100%;" placeholder="请选择所属户档">
				    	<el-option :label="item.header + '(' + item.sn + ')'" :value="item.id" v-for="(item, index) in Home"></el-option>
				    </el-select>
				</el-form-item>
				<el-form-item label="建造年代" prop="year">
				    <el-input v-model="formData.year" placeholder="请输入建造年代">
						<template slot="append">年</template>
					</el-input>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="面积" prop="area">
						    <el-input v-model="formData.area" placeholder="请输入面积">
								<template slot="append">㎡</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="结构形式" prop="structure">
						    <el-select v-model="formData.structure" style="width: 100%;" placeholder="请选择结构形式">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.structure"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="层数" prop="floor">
						    <el-input v-model="formData.floor" placeholder="请输入层数">
						    	<template slot="append">层</template>
						    </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="开间" prop="room">
						    <el-input v-model="formData.room" placeholder="请输入开间">
						    	<template slot="append">间</template>
						    </el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="前墙材料" prop="before_wall">
						    <el-input v-model="formData.before_wall" placeholder="请输入前墙材料"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="后墙材料" prop="after_wall">
						    <el-input v-model="formData.after_wall" placeholder="请输入后墙材料"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="山墙材料" prop="gable_wall">
						    <el-input v-model="formData.gable_wall" placeholder="请输入山墙材料"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="内横墙材料" prop="Inner_wall">
						    <el-input v-model="formData.Inner_wall" placeholder="请输入内横墙材料"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
                <el-form-item label="类型材料" prop="roof">
                    <el-checkbox-group v-model="formData.roof">
                        <el-checkbox :label="item" v-for="(item, index) in Site.roof"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            	<el-form-item>
            		<el-button @click="dialogClose">取 消</el-button>
            		<el-button type="primary" @click="formSubmit">确 定</el-button>
            	</el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
			return {
				dialog: false,
				Home: [],
				Site: [],
				formData: {
					id: 0,
					homeid: '', //所属户档
					year: '', //建造年月
					structure: '', //结构形式
					floor: '', //层数
					room: '', //开间数量
					area: '', //面积
					before_wall: '', //前墙材料
					after_wall: '', //后墙材料
					Inner_wall: '', //内横墙材料
					gable_wall: '', //山墙材料
					roof: [], //屋面材料
				}
			}
        },
		created() {
		},
		watch: {
			dialog () {
				if(!this.dialog) {
					this.clearFormData()
					this.$emit('getData')
				} else {
					this.getHome()
					this.getSite()
				}
			}
		},
        methods: {
			getHome () {
				this.$apiPost('House/getHome').then(res => {
					if(res.code == 1) {
						this.Home = res.data
					}
				})
			},
			getSite () {
				this.$apiPost('Index/getSiteFile').then(res => {
					if(res.code == 1) {
						this.Site = res.data
					}
				})
			},
			dialogClose(){
				this.$emit('dialogToggle')
			},
			clearFormData () {
				for(let i in this.formData){
					if(i == 'id') {
						this.formData[i] = 0
					} else if (i == 'roof') {
						this.formData[i] = []
					} else {
						this.formData[i] = ''
					}
				}
			},
			// 保存编辑
			formSubmit() {
				if(this.formData.roof.length > 0) {
					this.formData.roof = this.formData.roof.join(',')
				}
				this.$apiPost('House/editData', this.formData).then(res => {
					if(res.code == 1) {
						this.$message(res.msg)
						this.dialogClose()
					} else {
						this.$message(res.msg)
					}
				})
			},
        }
    };
</script>
<style scoped>
	.mselect{
		width: 100%;
	}
	.mtdiv{
		margin-top: 10px;
		display: inline-block;
		width: 100%;
	}
	.mtdiv .mtdiv-v{
		float: left;
		width: 50%;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}
	.mtdiv .mtdiv-v label{
		float: left;
		margin-right: 10px;
	}
	.mtdiv .el-input{
		float: left;
		width: 80%;
		margin: 5px 0;
	}
</style>
